<template>
	<view>
		<view class="head">
			<view class="newsBox">
				<view class="newsBox_title">
					{{headNews.title}}
				</view>
				<view class="newsBox_content">
					{{headNews.introduction}}
				</view>
			</view>
		</view>
		<view class="content_head">
			<view class="content_head_title">
				国际疫苗研发进度
			</view>
			<view class="content_head_content">
				数据来源：均为世卫组织公布或权威媒体公开报道可查询数据，
			</view>
			<view class="content_head_content">
				本表仅统计进入临床II期以后疫苗进展。
			</view>
		</view>
		<view class="content_label" @click="showLabel=true">
		</view>
		<!-- showLabel弹出层 -->
		<u-popup v-model="showLabel" mode="center" height="926rpx" width="638rpx" >
			<scroll-view scroll-y height="800rpx">
				<view class="label_title">
					疫苗类型
				</view>
				<view class="label_content" v-for="item in vaccineTypeList" :key="item.id">
					<view class="content_title">
						<view class="label_content_icon" :style="'background-color:' + item.title_color">
						</view>
						<view class="label_content_title" :style="'color:'+ item.title_color">
							{{item.title}}
						</view>
					</view>
					<view class="content_introduction">
						{{item.content}}
					</view>
					<view class="content_advantage">
						<text>{{item.sub_content}}</text>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<view class="VaccineForm_header">
			<view class="VaccineForm_header_left">
				研发厂商/疫苗名称
			</view>
			<view class="VaccineForm_header_right">
				<view class="VaccineFormProcessName">
					临床II期
				</view>
				<view class="VaccineFormProcessName">
					临床II/III期
				</view>
				<view class="VaccineFormProcessName">
					临床III期
				</view>
				<view class="VaccineFormProcessName">
					<text>上市</text>
					<view class="VaccineFormProcessNameIcon"  @click="showProcessLabel=true">
					</view>
				</view>
			</view>
		</view>
		<!-- VaccineFormPrecess弹出层 -->
		<u-popup v-model="showProcessLabel" mode="center" height="926rpx" width="638rpx" >
			<scroll-view scroll-y height="800rpx">
				<view class="label_title">
					临床阶段说明
				</view>
				<view class="label_content" v-for="item in processIntroductionList" :key="item.id">
					<view class="content_title">
						<view class="label_content_title" style="color: #5c89e6;">
							{{item.title}}
						</view>
					</view>
					<view class="content_advantage">
						<text>{{item.content}}</text>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-read-more show-height="1000" :toggle='true' text-indent=0 close-text="查看更多">
			<view class="VaccineForm_content" v-for="item in processDataList">
				<view class="content_left">
					<view class="iconBox">
						<image :src="item.devunit_flag" mode="" class="content_icon"></image>
					</view>
					
					<view class="content_name">
						<view class="content_name_up">
							{{item.devunit}}
						</view>
						<view class="content_name_down">
							{{item.vaccine_name}}
						</view>
					</view>
				</view>
				<view class="content_right">
					<u-line-progress :percent="25*item.progress" :round="false" :active-color="item.color" :height="12" :show-percent='false'></u-line-progress>
				</view>
			</view>
		</u-read-more>
		
		<view class="content_title">
			主要国家疫苗接种情况
		</view>
		<view class="vaccination_header">
			<view class="vaccination_header_left">
				国家
			</view>
			<view class="vaccination_header_right">
				疫苗使用情况
			</view>
		</view>
		<u-read-more show-height="600" :toggle='true' text-indent=0 close-text="查看更多">
			<view class="vaccination_content" v-for="item in vaccinationDataList" :key="item.id">
				<view class="vaccination_content_left">
					
					<image :src="item.flag" mode="" class="left_up"></image>
					<view class="left_down">
						{{item.country}}
					</view>
				</view>
				<view class="vaccination_content_right">
					<text>
						{{item.content}}
					</text>
				</view>
			</view>
		</u-read-more>
		<view class="content_head" style="margin-top: 0rpx;">
			<view class="content_head_title">
				疫苗上市流程说明
			</view>
			<view class="content_head_content">
				数据来源：均为世卫组织公布或疫苗研发单位及官方媒体公布信息
			</view>
		</view>
		<image src="https://mat1.gtimg.com/news/vaccine/progresstop.png" mode="" style="margin: 0 40rpx;height: 42rpx; width: 670rpx;"></image>
		<view class="maketing">
			<view class="maketing_content" v-for="item in maketingProcessDataList" :key='item.id'>
				<view class="content_count">
					{{item.count}}款
				</view>
				<view class="content_name">
					{{item.process}}
				</view>
			</view>
		</view>
		<view class="footer" style="margin: 20rpx 40rpx; font-size: 24rpx; line-height: 44rpx; color: #222;" >
			疫苗在前期的研发过程中，先要获得免疫源，获得活病毒分离相关的亚单位等，还要进行免疫反应测试和动物保护的测试，做好临床前的毒理研究等；进入疫苗研发阶段，需要在临床前研究的基础上，进行临床申报，要确定疫苗的有效性，是在三期临床试验。需要观察一个流行周期来确定它对易感人群的保护率，此后才能实现疫苗上市。
		</view>
	</view>
</template>

<script>
	import maketingProcessData from './maketingProcess.json'
	import vaccinationData from './vaccination.json'
	import processData from './processData.json'
	import vaccineType from './yimiaoleixing.json'
	import processIntroduction from './processIntroduction.json'
	export default {
		data() {
			return {
				maketingProcessDataList:[],
				vaccinationDataList:[],
				processDataList:[],
				processIntroductionList:[],
				showProcessLabel:false,
				vaccineTypeList:[],
				showLabel:false,
				headNews:{}
			};
		},
		onLoad() {
			this.getHeadNews()
			this.vaccineTypeList = vaccineType.data
			this.processIntroductionList = processIntroduction.data
			this.processDataList = processData.data
			for(var i=0;i<this.processDataList.length;i++){
				if(this.processDataList[i].vaccine_type == '1'){
					this.processDataList[i].color = '#F06061'
				}else if(this.processDataList[i].vaccine_type == '2'){
					this.processDataList[i].color = '#0055EE'
				}else if(this.processDataList[i].vaccine_type == '3'){
					this.processDataList[i].color = '#E8B800'
				}else{
					this.processDataList[i].color = '#2FC07F'
				}
			}
			this.vaccinationDataList = vaccinationData.data
			this.maketingProcessDataList = maketingProcessData.data
			
		},
		methods:{
			getHeadNews(){
				var data = {"data":[{"id":1,"title":"国内疫苗进展","introduction":"12月15日以来，我国已累计开展新冠病毒疫苗接种1500万人次。新冠疫苗成本和接种费用全部由医保基金负担，居民个人不负担费用。","_ctime":"2020-11-16T07:56:20.000Z","_mtime":"2021-01-21T09:54:44.000Z","_id":1}],"code":200,"version":-1}
				this.headNews = data.data[0]
			}
		}
	}
</script>

<style lang="scss" scoped>
.maketing{
	height: 192rpx;
	margin: 10rpx 40rpx;
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	.maketing_content{
		width: 110rpx;
		.content_count{
			background-color: #EEF5FF;
			height: 70rpx;
			padding: 22rpx 0;
			color: #222;
			font-weight: 600;
			text-align: center;
		}
		.content_name{
			color: #477eef;
			background-color: #DCE9FF;
			padding: 18rpx 14rpx 22rpx;
			height: 120rpx;
		}
	}
}
.vaccination_content{
	padding: 16rpx 0;
	font-size: 24rpx;
	display: flex;
	justify-content: start;
	margin: 20rpx 40rpx;
	background-color: #EEF5FF;
	align-items: center;
	line-height: 24rpx;
	.vaccination_content_left{
		width: 30%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		.left_up{
			height: 24rpx;
			width: 24rpx;
			border-radius: 50%;
		}
		.left_down{
			font-weight: 600;
			color: #222;
			text-align: center;
		}
	}
	.vaccination_content_right{
		width: 70%;
		color: #222;
	}
}
.vaccination_header{
	height: 60rpx;
	padding: 16rpx 0;
	font-size: 24rpx;
	color: #005dff;
	display: flex;
	justify-content: start;
	margin: 0 40rpx;
	background-color: #EEF5FF;
	.vaccination_header_left{
		width: 30%;
		text-align: center;
	}
	.vaccination_header_right{
		width: 70%;
		text-align: center;
	}
}
.content_title{
	margin: 40rpx 40rpx 20rpx 40rpx;
	color: #222;
	font-size: 32rpx;
	font-weight: 600;
}
.VaccineForm_content{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20rpx 40rpx;
	font-size: 24rpx;
	background-color: #F6FAFF;
	.content_left{
		display: flex;
		justify-content: start;
		align-items: center;
		width: 304rpx;
		background-color: #F6FAFF;
		.iconBox{
			width: 60rpx;
			margin-right: 10rpx;
			.content_icon{
			height: 30rpx;
			width: 30rpx;
			margin: 0 0 0 10rpx;
			border-radius: 50%;
			}
		}
		
		.content_name{
			padding: 20rpx 0;
			.content_name_up{
				color: #222;
				line-height: 24rpx;
				text-align: start;
			}
			.content_name_down{
				color: #a6a6a6;
				line-height: 24rpx;
				text-align: start;
			}
		}
	}
	.content_right{
		background-color: #F6FAFF;
		width: 336rpx;
		height: 100%;
		display: flex;
		align-items: center;
	}
}
.VaccineForm_header{
	margin: 0 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 78rpx;
	.VaccineForm_header_left{
		padding: 14rpx 0 14rpx 60rpx;
		width: 304rpx;
		background-color: #EEF5FF;
		color: #005dff;
		font-size: 24rpx;
	}
	.VaccineForm_header_right{
		display: flex;
		justify-content: start;
		align-items: center;
		background-color: #EEF5FF;
		.VaccineFormProcessName{
			width: 85rpx;
			font-size: 24rpx;
			color: #005dff;
			text-align: center;
			display: flex;
			justify-content: start;
			align-items: center;
			.VaccineFormProcessNameIcon{
				height: 24rpx;
				width: 24rpx;
				background: url(https://mat1.gtimg.com/news/vaccine/ruleiconn.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
.label_content{
	margin: 0 40rpx 60rpx 40rpx;
	.content_title{
		display: flex;
		justify-content: start;
		align-items: center;
		.label_content_icon{
			margin-right: 10rpx;
			height: 16rpx;
			width: 16rpx;
		}
		.label_content_title{
			font-size: 28rpx;
			font-weight: 600;
		}
		
	}
	.content_introduction{
		font-size: 24rpx;
		color: #222;
		margin: 20rpx 0;
		
	}
	.content_advantage{
		font-size: 24rpx;
		color: #666;
	}
	
}
.label_title{
	margin: 40rpx;
	color: #141414;
	font-size: 36rpx;
	font-weight: 600;
}
.content_label{
	height: 25rpx;
	margin: 10rpx 40rpx 20rpx 40rpx;
	background: url(https://mat1.gtimg.com/news/vaccine/legendn.png) no-repeat;
	background-size: 100% 100%;
}
.content_head{
	height: 200rpx;
	padding: 46rpx 40rpx 20rpx 40rpx;
	margin-top: 150rpx;
	.content_head_title{
		padding-bottom: 10rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
	}
	.content_head_content{
		font-size: 24rpx;
		color: #a6a6a6;
	}
}
.head{
	height: 312rpx;
	padding:40rpx 40rpx 0 40rpx;
	background-image: url(https://mat1.gtimg.com/news/vaccine/topbgn.png);
	background-size: 100% 100%;
	.newsBox{
		height: 216rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 26rpx 26rpx 30rpx;
		box-shadow: 0 0  30rpx #77AEFF;
		margin-top: 200rpx;
		.newsBox_title{
			font-size: 32rpx;
			color: #141414;
			font-weight: 600;
		}
		.newsBox_content{
			font-size: 24rpx;
			color: #737373;
			margin-top: 8rpx;
		}
	}
}
</style>
